.loginBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 800px;

  .box {
    position: relative;
    padding: 24px;
    width: 300px;
    height: 328px;
    border-radius: 16px;
    box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
    animation: rotateZ_0 .9s linear;
    background-color: #fff;
    transform-origin: center center;

    .icon {
      position: absolute;
      opacity: 0;
      top: 8px;
      left: 8px;
      margin-left: 24px;
      width: 48px;
      height: 48px;
      animation: img_rotateZ_0 .9s linear;
    }

    .login {
      width: 100%;
      width: 100%;
    }
  }

  // .box {
  //   overflow: hidden;
  //   position: relative;
  //   transform-style: preserve-3d;
  //   transition: transform .6s;
  //   background-color: #fff;
  //   box-shadow: 0px 10px 30px 10px rgba(0, 0, 0, 0.14);
  //   overflow: hidden;
  //   margin-bottom: 25px;
  //   padding: 0;
  //   border-radius: 16px;
  //   transform-origin: center center;
  //   width: 0;
  //   height: 0;

  //   .login {
  //     width: 100%;
  //     width: 100%;
  //   }
  // }
}

.box_flip_l {
  animation: flip_l 1s linear
}

.box_flip_r {
  animation: flip_r 1s linear
}

@keyframes flip_l {
  0% {
    transform: rotateY(-180deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

@keyframes flip_r {
  0% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

@keyframes rotateZ_0 {
  0% {
    transform: rotateZ(45deg);
    width: 64px;
    height: 64px;
    border-radius: 5px;
  }

  45% {
    transform: rotateZ(0deg);
    width: 64px;
    height: 64px;
    border-radius: 5px;
  }

  50% {
    transform: rotateZ(0deg);
    width: 64px;
    height: 64px;
    border-radius: 5px;
  }

  75% {
    border-radius: 5px;
  }

  100% {
    transform: rotateZ(0deg);
    width: 300px;
    height: 328px;
    border-radius: 24px;
  }
}

@keyframes img_rotateZ_0 {
  0% {
    transform: rotateZ(-45deg);
    opacity: 1;
    margin-left: 0px;
  }

  45% {
    transform: rotateZ(0deg);
    opacity: 1;
    margin-left: 0px;
  }

  70% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    margin-left: 24px;
  }
}